<template>
  <div class="">
    <el-form :inline="true">
      <div style="display: flex; justify-content: space-between;">
        <div>
          <el-form-item>
            <el-input v-model="username" clearable placeholder="用户" style="width: 200px;" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="type" clearable placeholder="操作" style="width: 200px;" />
            <!-- <el-select v-model="type" placeholder="操作类型">
              <el-option key="0" label="descontent" value="descontent" />
              <el-option key="0" label="actionname" value="actionname" />
            </el-select> -->
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getData">查询</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <el-table v-loading="listLoading" :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="id" width="80" align="center" />
      <el-table-column prop="uid" label="uid" width="80" align="center" />
      <el-table-column prop="ipaddress" label="IP" width="180" align="center" />
      <el-table-column prop="service" label="service" align="center" />
      <el-table-column prop="platype" label="platype" width="80" align="center" />
      <el-table-column prop="msg" show-overflow-tooltip label="msg" align="center" />
      <el-table-column prop="createtime" label="操作时间" width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime.replace('T',' ') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block " style="padding-top: 20px;">
      <el-pagination
        background
        :current-page="PageIndex"
        :page-sizes="[20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="idx=>{pageSize = idx}"
        @current-change="idx=>{PageIndex = idx}"
      />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Getsyslogstb } from '@/api/sysconfig.js'
export default {
  name: 'Name',
  data() {
    return {
      type: '',
      username: '',
      date: ['', ''],

      listLoading: false,
      tableData: [],
      totalCount: 0,
      PageIndex: 1,
      pageSize: 20
    }
  },
  computed: {},
  watch: {
    PageIndex(val) {
      console.log(val)
      this.getData()
    },
    pageSize(val) {
      this.getTableList()
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async onSearch() {},
    async getData(address) {
      this.listLoading = true
      const { list, pageIndex, totalCount } = await Getsyslogstb({
        type: this.type,
        stime: this.date ? this.date[0] : '',
        etime: this.date ? this.date[1] : '',
        PageIndex: this.PageIndex,
        PageSize: this.pageSize
      })
      this.totalCount = totalCount
      this.tableData = list
      this.listLoading = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
<style lang="scss">
  .el-table .warning-row {
    background: oldlace;
  }
  .el-tooltip__popper{
    max-width:1200px;
    font-size: 16px;
  }
</style>
